<template>
    <el-container class="mev-div-border">
        <el-header>
            <el-row>
                <el-col :span="16" style="text-align: left">
                    可视域分析
                </el-col>
                <el-col :span="8" style="position:absolute;top:-6px;right:0px;text-align: right">
                    <el-button @click="toolbarFunc('close')"><p style="position: absolute;right: 13px;top: 15px">关闭</p></el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main class="mev-div-border">
            <el-row>
                <el-col>
                    <el-button @click="start" style="margin-bottom: 3px">设置视角点</el-button>
                </el-col>
                <el-col>
                    <div class="block">
                        <el-row>
                            <el-col :span="9">
                                方向角
                            </el-col>
                            <el-col :span="15">
                                <el-input-number style="width: 100%" size="mini" v-model="value1" :min="0" :max="360" @change="setnumber"></el-input-number>
                            </el-col>
                        </el-row>
                        <el-slider v-model="value1" :min="0" :max="360" @change="setnumber" :show-tooltip="false"></el-slider>
                    </div>
                </el-col>
                <!--                <el-col>-->
                <!--                    <div class="block">-->
                <!--                        <span class="demonstration">俯仰角</span>-->
                <!--                        <el-slider v-model="value2" :min="-70" :max="80" @change="setnumber" :show-tooltip="false"></el-slider>-->
                <!--                    </div>-->
                <!--                </el-col>-->
                <el-col>
                    <div class="block">
                        <el-row>
                            <el-col :span="9">
                                视场角
                            </el-col>
                            <el-col :span="15">
                                <el-input-number style="width: 100%" size="mini" v-model="value3" :min="0" :max="360" @change="setnumber"></el-input-number>
                            </el-col>
                        </el-row>
                        <el-slider v-model="value3" :min="0" :max="360" @change="setnumber" :show-tooltip="false"></el-slider>
                    </div>
                </el-col>
                <!--                <el-col>-->
                <!--                    <div class="block">-->
                <!--                        <span class="demonstration">垂直视角</span>-->
                <!--                        <el-slider v-model="value4" :min="10" :max="150" @change="setnumber" :show-tooltip="false"></el-slider>-->
                <!--                    </div>-->
                <!--                </el-col>-->
                <el-col>
                    <div class="block">
                        <el-row>
                            <el-col :span="6">
                                距离
                            </el-col>
                            <el-col :span="18">
                                <el-input-number style="width: 100%" size="mini" v-model="value5" :min="100" :max="15000" @change="setnumber"></el-input-number>
                            </el-col>
                        </el-row>
                        <el-slider v-model="value5" :min="100" :max="15000" @change="setnumber" :show-tooltip="false"></el-slider>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
import CartesianChooser from "../../../plugins/mev/measure/cartesian_chooser";
import VisualAnalysis2 from "../../../plugins/mev/measure/visual_analysis";

export default {
    name: "VisualAnalysisComponent",

    data() {
        return {
            value1: 0,
            value2: 0,
            value3: 360,
            value4: 90,
            value5: 10000,
            close: 0
        };
    },

    beforeDestroy() {
        if (this.close === 1) {
            this.clearAll();
        }
    },

    methods: {
        toolbarFunc: function(method) {
            switch (method) {
                case "close": {
                    if (this.$route.name !== "EmptyComponent") {
                        this.$router.push({ name: "EmptyComponent" });
                    }
                    break;
                }

                default:
                    break;
            }
        },

        setnumber: function() {
            //基于透视分析可视域
            let that = this;
            new VisualAnalysis2({
                viewer: window.cesiumViewer,
                viewPosition: VisualAnalysis2.CURRENT.viewPosition,
                direction: that.value1,
                horizontalViewAngle: that.value3,
                visualRange: that.value5
            });
        },

        start: function() {
            //基于透视分析可视域
            let chooser = new CartesianChooser(window.cesiumViewer);
            let that = this;
            chooser.start(
                function(cartesian3) {
                    new VisualAnalysis2({
                        viewer: window.cesiumViewer,
                        viewPosition: cartesian3,
                        direction: that.value1,
                        horizontalViewAngle: that.value3,
                        visualRange: that.value5
                    });
                },
                function() {
                    // error
                }
            );
            that.close = 1;
        },

        clearAll: function() {
            VisualAnalysis2.CURRENT.clear();
        }
    }
};
</script>

<style scoped>
.el-container {
    color: #ffffff;
}

.el-header {
    line-height: 60px;
}

.el-main {
    margin: 10px;
    padding: 10px;
}
.el-button {
    margin-top: 5px;
    width: 100%;
}
</style>
